<template>
  <el-container>
    <el-header>
      <!-- logo -->
      <router-link to="/">
        <img src="../assets/images/logo.06de76db.png" alt="" />
      </router-link>

      <!-- button -->
      <div>
        <!-- <el-button type="default" size="medium">注册</el-button> -->
        <el-button type="primary" size="medium" @click="loginVisible = true"
          >登录</el-button
        >
      </div>
    </el-header>

    <el-main>
      <!-- 轮播图 -->
      <el-carousel indicator-position="outside" height="400px">
        <el-carousel-item v-for="item in picList" :key="item.url">
          <img :src="item.url" alt="" />
        </el-carousel-item>
      </el-carousel>

      <!-- 登录面板 -->
      <el-dialog title="登录中心" width="500px" :visible.sync="loginVisible">
        <el-form
          :model="loginForm"
          label-width="60px"
          :rules="rules"
          ref="loginForm"
        >
          <el-form-item label="用户名" prop="account">
            <el-input
              v-model="loginForm.account"
              prefix-icon="iconfont icon-yonghu"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              type="password"
              v-model="loginForm.password"
              prefix-icon="iconfont icon-mima"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button
            type="primary"
            @click="submitForm('loginForm')"
            size="medium"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </el-main>

    <el-footer>
      <p>
        武汉源码时代，湖北靠谱的培训学校，保全校最低就业月薪6000以上，否则全额退费
      </p>
    </el-footer>
  </el-container>
</template>

<script>
import { login } from '@/api/users.js'
import local from '@/utils/local.js'

export default {
  data() {
    const validAccount = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        callback()
      }
    }
    const validPass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        callback()
      }
    }
    return {
      loginVisible: false,
      picList: [
        {
          url: require('../assets/images/banner.png')
        },
        {
          url: require('../assets/images/banner 02.png')
        },
        {
          url: require('../assets/images/banner 03.png')
        }
      ],
      loginForm: {
        account: '',
        password: ''
      },
      rules: {
        account: [{ validator: validAccount, trigger: 'blur' }],
        password: [{ validator: validPass, trigger: 'blur' }]
      },
      code: {
        imgBase64: '',
        uuid: ''
      }
    }
  },
  created() {
    this.getLoginCode()
  },
  methods: {
    async getLoginCode() {
      // const { data } = await getCode()
      // console.log(data)
      // this.code.imgBase64 = data.imgBase64
      // this.code.uuid = data.uuid
    },
    submitForm(formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          const { token, user } = await login({
            username: this.loginForm.account,
            password: this.loginForm.password
          })

          if (token) {
            this.$message({
              type: 'success',
              message: '登录成功！'
            })
            local.set('token', token)
            local.set('user', user)
            this.$router.push('/')
          } else {
            this.$message({
              type: 'error',
              message: '登录失败！'
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.el-container {
  height: 100%;

  .el-header {
    height: 80px !important;
    width: 980px;
    max-width: 1120px;
    margin: 0 auto;

    display: flex;
    justify-content: space-between;
    align-items: center;

    img {
      width: 120px;
    }
  }

  .el-main {
    padding: 40px 0 0;
    img {
      width: 100%;
      height: 400px;
    }
  }
  .el-footer {
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #666;
    background-color: #cce5ff;
    color: #004085;
  }
}

.dialog-footer {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
